<template>
  <div>
    <el-dialog :visible.sync="imageDialogVisible" width="90%" >
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <!--  -->
    <el-dialog
      :visible.sync="visible"
      width="60%"
      :show-close="false"
      @closed="onClosed"
      top="10vh"
      style="margin-botton:30px;"
    >
      <div class="container">
        <el-row>
          <el-col :span="10">
            <div style="width: 250px; height: 250px;">
              <img
                :src="$http.defaults.baseURL+'/upload/image/'+data.main_image"
                style="object-fit: fill;width: 100%;height: 100%;"
              />
            </div>
          </el-col>
          <el-col :span="14">
            <el-row class="goods-info goods-title" style="height:48px;">{{data.title}}</el-row>
            <el-row class>
              <div class="price-box">
                <span style="font-size:14px;">价格：</span>
                <strong class="goods-price">{{data.price}}</strong>
                <span style="font-size:14px;">积分</span>
              </div>
            </el-row>
            <el-row class="goods-info-row">
              <el-col :span="12">
                <span>卖家账号：</span>
                <strong style="color:#333">{{data.seller}}</strong>
              </el-col>
              <el-col :span="12">
                <span>库存数量：</span>
                <strong style="color:#333">{{data.quantity}}</strong>
                <span>个</span>
              </el-col>
            </el-row>
            <el-row class="goods-info-row">
              <el-col :span="12">
                <span>游戏类型：</span>
                <strong style="color:#333">{{getBelongs(data.belongs)}}</strong>
              </el-col>
              <el-col :span="12">
                <span>装备类型：</span>
                <strong style="color:#333">{{getGoodsType(data.goods_type)}}</strong>
              </el-col>
            </el-row>
            <el-row class="goods-info-row" style="margin-top:20px;">
              <el-col :span="24">
                <el-input-number style="width:100px;" size="small" v-model="num"></el-input-number>
                <div style="height:36px;line-height:36px;display:inline">
                  <span style="margin-left:5px;">合计：</span>
                  <span style="font-size:18px;color:#ff4603">{{data.price*num}}</span>
                  <span style="margin-left:2px;font-size:15px;">积分</span>
                </div>
                <el-button
                  type="danger"
                  style="float:right;"
                  round
                  size="small"
                  @click.native="handleBuy()"
                >立 即 购 买</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <div style="margin-top:30px;background-color: #f3f3f3;padding:5px;">
            <span>{{data.subtitle}}</span>
          </div>
        </el-row>
        <el-row>
          <el-carousel style="margin:30px 0;background-color:#818181;" :interval="4000">
            <el-carousel-item v-for="item in data.detail_image" :key="item">
              <div
                style=" height: 300px;margin:0 auto;cursor:pointer"
                @click="showImage($http.defaults.baseURL+'/upload/image/'+item)"
              >
                <img
                  :src="$http.defaults.baseURL+'/upload/image/'+item"
                  style="object-fit: fill;width: 100%;height: 100%;"
                />
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { log } from "util";
export default {
  name: "detail-dialog",
  data: function() {
    return {
      dialogImageUrl: "",
      imageDialogVisible: false,
      num: 1
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: {}
    },
    games: {
      type: Array,
      default: []
    },
    goodsType: {
      type: Array,
      default: []
    }
  },
  methods: {
    handleUploadPreview(file) {
      this.dialogImageUrl = file.url;
      this.imageDialogVisible = true;
    },
    handleUploadRemove(file, fileList) {
      if (fileList.length > 0) {
        this.postData.main_image = fileList[0].response.data;
        let images = [];
        for (let i = 1; i < fileList.length; i++) {
          images.push(fileList[i].response.data);
        }
        this.postData.detail_image = images.join(",");
      }
    },
    handleUploadError(err, file, fileList) {
      this.$message.error(err.toString());
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        if (fileList.length > 0) {
          this.postData.main_image = fileList[0].response.data;
          let images = [];
          for (let i = 1; i < fileList.length; i++) {
            images.push(fileList[i].response.data);
          }
          this.postData.detail_image = images.join(",");
        }
      } else {
        this.$message.error(res.msg);
      }
    },
    handleAdd() {
      this.$http
        .post("/trade/mycreate", this.postData)
        .then(res => {
          this.$message({
            message: res.msg,
            type: "success"
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    onClosed() {
      this.$emit("close", false);
    },
    getBelongs(belongs) {
      let game = this.games.find(item => {
        return item.code == belongs;
      });
      return game.name;
    },
    getGoodsType(type) {
      let goodsTypeItem = this.goodsType.find(item => {
        return item.value == type;
      });
      return goodsTypeItem.key;
    },
    handleBuy() {
      if (this.num <= 0) {
        this.$message.error("购买数量不能少于0");
        return;
      }
      this.$http
        .post("/trade/buy", {
          goods_id: this.data.uuid,
          quantity: this.num
        })
        .then(res => {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.visible = false;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    showImage(url) {
      this.dialogImageUrl = url;
      this.imageDialogVisible = true;
    }
  },

  mounted() {
    // 初始化tabs
  }
};
</script>

<style scoped>
.goods-title {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}
.goods-price {
  font-size: 30px;
  font-weight: bold;
  color: #ff6700;
  font-family: arial;
}
.price-box {
  margin-top: 10px;
  background-color: #fcfaf7;
  padding: 20px 5px;
}
.goods-info-row {
  margin-top: 10px;
  font-size: 15px;
}
.container {
  height: 650px;
  overflow: hidden;
  overflow-y: scroll;
}
.container::-webkit-scrollbar {
  display: none;
}
</style>
    

